<template>
  <div class="container">
    <!-- 1. 未处理 -->
    <el-card>
      <el-row :styles="{ width: '100%' }" type="flex" justify="space-between">
        <div class="box_card_left">
          <div>未处理</div>
          <div>{{ tobeTaskCount }}</div>
        </div>
        <div>
          <el-button size="small">打卡范围</el-button>
          <el-button type="primary" size="small" @click="showDialog = true">设置</el-button>
        </div>
      </el-row>
    </el-card>

    <!-- 2. 部门 -->
    <div style="margin: 20px 0;">
      <el-card body-style="padding-left: 80px;">
        <div class="checkbox_group">
          <div class="checkbox_group_title">部门：</div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="v in departments" :key="v.id" :label="v.id">{{ v.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-card>
    </div>

    <!-- 表格 -->
    <el-card>
      <el-table :data="tableData" border>
        <el-table-column label="序号">
          <template #default="{row, $index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" width="100" align="center" />
        <el-table-column label="工号" prop="workNumber" width="120" align="center" />
        <el-table-column label="部门" prop="departmentName" width="120" align="center" />
        <el-table-column label="手机" prop="mobile" width="120" align="center" />
        <el-table-column
          v-for="(v,i) in (tableData.length > 0 && tableData[0].attendanceRecord ? tableData[0].attendanceRecord : [])"
          :key="v.id + i"
          :label="formatDate(v.day.slice(4))"
          align="center"
        >
          <div
            :style="{color: getStatusColor(v.adtStatu) }"
          >{{ getStatusNameById(v.adtStatu) }}
          </div>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="pageParams.page"
          @current-change="currentChange"
        />
      </div>
    </el-card>

    <Dialog :show-dialog.sync="showDialog" />

  </div>
</template>
<script>
import { getAttendancesAPI } from '@/api/attendance'
import { getDepartmentAPI } from '@/api/department'
import Dialog from './dialog.vue'

export default {
  name: 'Attendance',
  components: { Dialog },
  data() {
    return {
      showDialog: true,
      departments: [], // 部门
      checkList: [], // 部门复选框
      tableData: [], // 表格数据
      tobeTaskCount: {}, // 未处理的考勤
      attendanceStatus: [ // 考勤方式
        { id: 1, name: '正常', color: 'green' },
        { id: 2, name: '旷工', color: 'red' },
        { id: 3, name: '迟到', color: 'orange' },
        { id: 4, name: '早退', color: 'orange' },
        { id: 5, name: '外出', color: 'blue' },
        { id: 6, name: '出差', color: 'purple' },
        { id: 7, name: '年假', color: 'lightblue' },
        { id: 8, name: '事假', color: 'gray' },
        { id: 9, name: '病假', color: 'lightgray' },
        { id: 10, name: '婚假', color: 'pink' },
        { id: 11, name: '丧假', color: 'black' },
        { id: 12, name: '产假', color: 'lightpink' },
        { id: 13, name: '奖励产假', color: 'lightpink' },
        { id: 14, name: '陪产假', color: 'lightblue' },
        { id: 15, name: '探亲假', color: 'brown' },
        { id: 16, name: '工伤假', color: 'red' },
        { id: 17, name: '调休', color: 'green' },
        { id: 18, name: '产检假', color: 'lightgray' },
        { id: 19, name: '流产假', color: 'pink' },
        { id: 20, name: '长期病假', color: 'lightgray' },
        { id: 21, name: '补签', color: 'gray' },
        { id: 22, name: '休息', color: 'green' }
      ],
      pageParams: { // 参数
        page: 1,
        pagesize: 10,
        deptID: null // 部门id
      },
      total: 0 // 总条数
    }
  },
  watch: {
    // 选中部门重新获取部门的考勤
    checkList() {
      this.pageParams.deptID = this.checkList.join(',') // deptID接口要求的字符串, 把得到的数组转成字符串
      this.getAttendancesData()
    }
  },
  created() {
    this.getDepartmentData()
    this.getAttendancesData()
  },
  methods: {
    // 部门列表
    async getDepartmentData() {
      this.departments = await getDepartmentAPI()
    },

    // 考勤列表
    async getAttendancesData() {
      const { data: { rows, total }, tobeTaskCount } = await getAttendancesAPI(this.pageParams) // 查询考勤数据列表接口
      this.tableData = rows
      this.total = total
      this.tobeTaskCount = tobeTaskCount
    },
    // 格式化日期
    formatDate(day) {
      // 提取月份和日期
      const month = parseInt(day.slice(0, 2), 10) // 将前两位解析为整数去掉前导零
      const date = parseInt(day.slice(2, 4), 10) // 将后两位解析为整数去掉前导零
      return `${month}/${date}` // 拼接为 "月/日" 格式
    },
    // 考勤
    getStatusNameById(id) {
      const obj = this.attendanceStatus.find(v => v.id === id)
      return obj && obj.name
    },
    // 考勤字体颜色
    getStatusColor(id) {
      const obj = this.attendanceStatus.find(v => v.id === id)
      return obj && obj.color
    },
    // 页数改变
    async currentChange(e) {
      this.pageParams.page = e
      this.getAttendancesData()
    }
  }
}
</script>
<style lang="scss" scoped>
.box_card_left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px 0;

}

// 2 部门
.checkbox_group {
  display: flex;

  .checkbox_group_title {
    font-weight: 700;
  }

  // 复选框
  .el-checkbox-group {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
  }
}

// 分页
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
</style>
